<!--  -->
<template>
    <div>

        <el-badge :value="city" class="item"></el-badge>
        <el-badge type="primary" :value="locality" class="item ml-2"></el-badge>
        <div class=" font-bold text-white bg-gradient-to-br from-transparent to-gray-600  p-2 mt-2"
            style="width: 90%;border-radius: 8px;text-align: center; border: 2px #fff dashed;height: 60px;"
            v-if="qweather && qweather.temperature">
            <el-tooltip placement="bottom" trigger="click" :content="'体感温度：' + qweather.feelst">

                <span class="text-transparent bg-gradient-to-r from-pink-500 to-red-500 bg-clip-text "
                    style="font-size: 1.2rem;font-weight: 900;line-height: 43px;">

                    {{ qweather.temperature }}℃


                </span>


            </el-tooltip>
            <el-tooltip placement="bottom" trigger="click" :content="qweather.info">
                <div class="float-right" v-if="qweather.info == '晴'">
                    <clearday style="width: 40px;" />

                </div>
                <div class="float-right" v-else-if="qweather.info == '多云'">
                    <cloudy style="width: 40px;height: auto;" />
                </div>
                <div class="float-right" v-else> {{ qweather.info }}</div>
            </el-tooltip>
        </div>

        <div class=" font-bold text-white bg-gradient-to-br from-gray-600 to-black mt-2"
            style="width: 90%;border-radius: 8px;text-align: center; border: 2px #fff dashed;height: 30px; font-size: 0.7rem;"
            v-if="qweather && qweather.direct">
            {{
                qweather.direct + '-' + qweather.power + '/' +
                qweather.speed + '级'
            }}


        </div>
    </div>
</template>

<script>
import ax from "../ax";
import clearday from '@/assets/svg/clear-day.svg';
import cloudy from '@/assets/svg/cloudy.svg';
import { getClient, ResponseType } from '@tauri-apps/api/http';
let { get } = ax;
export default {
    data() {
        return {
            qweather: null,
            city: "",
            locality: "",
            weatherUpdateTimer: null
        };
    },

    components: { clearday, cloudy },

    computed: {},

    mounted() {

        this.scheduleGetUserLocation();
    },
    beforeDestroy() {
        clearInterval(this.weatherUpdateTimer);
    },
    created() { this.getUserLocation(); },

    methods: {
        scheduleGetUserLocation() {
            const now = new Date();
            const nextHour = new Date(now.getFullYear(), now.getMonth(), now.getDate(), now.getHours() + 1, 0, 1, 0);
            const delay = nextHour - now;

            setTimeout(() => {
                this.getUserLocation();
                this.weatherUpdateTimer = setInterval(this.getUserLocation.bind(this), 1000 * 60 * 60);
            }, delay);
        },
        getUserLocation() {
            console.log("getUserLocation")
            if (navigator.geolocation) {
                console.log("getUserLocation")
                navigator.geolocation.getCurrentPosition(this.getCityFromCoordinates, this.handleLocationError);
            } else {
                console.log("Geolocation is not supported by this browser.");
            }
        },
        async getCityFromCoordinates(position) {
            console.log("getCityFromCoordinates")
            const lat = position.coords.latitude;
            const lon = position.coords.longitude;
            const response = await fetch(`https://api.bigdatacloud.net/data/reverse-geocode-client?latitude=${lat}&longitude=${lon}&localityLanguage=zh`);
            const data = await response.json();
            const city = data.city;
            this.city = city;
            this.locality = data.locality;
            console.log(city)
            try {

                const client = await getClient();
                const response = await client.get('https://zhangteng.cloud/5001/api/Rss/GetWeather', {
                    timeout: 30,
                    query: {
                        cityName: city.replace('市', ''),
                    },
                    // the expected response type
                    responseType: ResponseType.JSON
                });
                console.log("GetWeather", response.data)
                this.qweather = response.data;
                this.qweather.city = city;
                this.qweather.temperature = this.qweather.data.real.weather.temperature;
                this.qweather.feelst = this.qweather.data.real.weather.feelst;
                this.qweather.info = this.qweather.data.real.weather.info;
                this.qweather.direct = this.qweather.data.real.wind.direct;
                this.qweather.speed = this.qweather.data.real.wind.speed;
                this.qweather.power = this.qweather.data.real.wind.power;
                this.qweather.rain = this.qweather.data.real.weather.rain;
                this.qweather.humidity = this.qweather.data.real.weather.humidity;
                this.qweather.predict = this.qweather.data.predict;
                console.log(this.qweather)
                // get("/api/Rss/GetWeather", { cityName: city.replace('市', '') }).then((res) => {
                //     console.log(res)
                //     this.qweather = res;
                //     this.qweather.city = city;
                //     this.qweather.temperature = this.qweather.data.real.weather.temperature;
                //     this.qweather.feelst = this.qweather.data.real.weather.feelst;
                //     this.qweather.info = this.qweather.data.real.weather.info;
                //     this.qweather.direct = this.qweather.data.real.wind.direct;
                //     this.qweather.speed = this.qweather.data.real.wind.speed;
                //     this.qweather.power = this.qweather.data.real.wind.power;
                //     this.qweather.rain = this.qweather.data.real.weather.rain;
                //     this.qweather.humidity = this.qweather.data.real.weather.humidity;
                //     this.qweather.predict = this.qweather.data.predict;
                //     console.log(this.qweather)

                // }).catch(error => {
                //     // 错误处理逻辑
                //     //window.$message.warning(error);
                // });


            } catch (error) {
                // window.$message.warning(error);
            }
        },
    }
}

</script>
<style lang='scss' scoped></style>